<template>
  <div>
    <my-header backBtn>
      <div slot="title">
        定位器功能介绍
      </div>

    </my-header>
<!--    <img src="@/../static/img/gps_sug.jpg" width="100%" height="100%" />-->

    <div id="head">
      <img id="head_img" src="@/../static/img/gps_sug_functionIntroduction.png" />
    </div>
    <ul id="middle">
      <li>
        <div class="middle_left_icon">
          <img src="@/../static/img/gps_sug_traceQuery.png" alt="">
        </div>
        <div class="middle_right_text">
          <h2>（1）轨迹查询：</h2>
          <p>只需设定时间段，即可查询宝宝在此时间段内的活动走向和轨迹。</p>
        </div>
      </li>
      <li>
        <div class="middle_left_icon">
          <img src="@/../static/img/gps_sug_secureFence.png" alt="">
        </div>
        <div class="middle_right_text">
          <h2>（2）安全围栏：</h2>
          <p>设防状态下，宝宝移动超过设定范围，将会触发报警。</p>
        </div>
      </li>
      <li>
        <div class="middle_left_icon">
          <img src="@/../static/img/gps_sug_alert.png" alt="">
        </div>
        <div class="middle_right_text">
          <h2>（3）SOS警报：</h2>
          <p>紧急情况下，宝宝按下书包上的SOS按钮，会给家长发送报警信息进行求助，同时上传到服务器。</p>
        </div>
      </li>
    </ul>

  </div>
</template>

<script>
  export default {
    name: "GpsSug",
  }
</script>

<style scoped>
  #wrapper {
    width: 100%;
    height: 100%;
    background-image: url("../../../static/img/gps_sug_background.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  #head {
    text-align: center;
  }
  #head_img {
    width: 90%;
    height: 90%;
    margin-top: 5%;
  }
  #middle {
    list-style-type: none;
  }
  #middle li {
    text-align: left;
    margin: 5% auto 0;
    width: 90%;
  }
  .middle_left_icon {
    display: inline-block;
    width: 25%;
  }
  .middle_left_icon img {
    width: 80%;
  }
  .middle_right_text {
    display: inline-block;
    text-align: left;
    width: 73%;
  }
  .middle_right_text h2 {
    font-weight: bold;
    position: relative;
    left: -2.5%;
  }
  .middle_right_text p {
    font-size: 14px;
  }
</style>
